<template>
  <view>
    <view class="content" @touchstart="hideDrawer">
      <scroll-view class="msg-list" scroll-y="true" :scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory" upper-threshold="50">
        <!-- 加载历史数据waitingUI -->
        <view class="loading">
          <view class="spinner">
            <view class="rect1"></view>
            <view class="rect2"></view>
            <view class="rect3"></view>
            <view class="rect4"></view>
            <view class="rect5"></view>
          </view>
        </view>
        <view class="row" v-for="(item,index) in msgList" :key="index" :id="item.ID">
          <!-- 用户消息 -->
          <block>
            <!-- 自己发出的消息 -->
            <view class="my" v-if="item.flow=='out'">
              <!-- 左-消息 -->
              <view class="left">
                <!-- 文字消息 -->
                <view v-if="item.type==  TIM.TYPES.MSG_TEXT " class="bubble">
                  <rich-text :nodes="nodesFliter(item.payload.text)"></rich-text>
                </view>
                <view v-else-if="item.type== 'TIMImageElem'" class="bubble">
                  <u-image @click="showPic(item.payload.imageInfoArray)" :src="item.payload.imageInfoArray[0].imageUrl" mode="widthFix" width="400"></u-image>
                </view>
              </view>
              <!-- 右-头像 -->
              <view class="right">
                <image :src="item.avatar"></image>
              </view>
            </view>
            <!-- 别人发出的消息 -->
            <view class="other" v-else>
              <!-- 左-头像 -->
              <view class="left">
                <image :src="item.avatar"></image>
              </view>
              <!-- 右-用户名称-时间-消息 -->
              <view class="right">
                <view class="username">
                  <view class="name">{{item.nick}}</view>
                  <view class="time">{{timeFliter(item.time)}}</view>
                </view>
                <!-- 文字消息 -->
                <view v-if="item.type==TIM.TYPES.MSG_TEXT" class="bubble">
                  <rich-text :nodes="nodesFliter(item.payload.text)"></rich-text>
                </view>
                <view v-else-if="item.type== 'TIMImageElem'" class="bubble">
                  <u-image @click="showPic(item.payload.imageInfoArray)" :src="item.payload.imageInfoArray[0].imageUrl" mode="widthFix" width="400"></u-image>
                </view>
              </view>
            </view>
          </block>
        </view>
      </scroll-view>
    </view>
    <!-- 抽屉栏 -->
    <view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
      <!-- 表情 -->
      <swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
        <swiper-item v-for="(page,pid) in emojiList" :key="pid">
          <view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
            <image mode="widthFix" :src="'https://lvs.shandongweipai.com/uploads/20211029/'+em.url"></image>
          </view>
        </swiper-item>
      </swiper>
      <!-- 更多功能 相册-拍照-红包 -->
      <view class="more-layer" :class="{hidden:hideMore}">
        <view class="list">
          <view class="box" @tap="chooseImage">
            <view class="icon tupian2"></view>
          </view>
          <view class="box" @tap="camera">
            <view class="icon paizhao"></view>
          </view>
          <!-- <view class="box" @tap="handRedEnvelopes">
						<view class="icon hongbao"></view>
					</view> -->
        </view>
      </view>
    </view>
    <!-- 底部输入栏 -->
    <view class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard">
      <!-- H5下不能录音，输入栏布局改动一下 -->
      <!-- #ifndef H5 -->
      <!-- <view class="voice">
				<view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>
			</view> -->
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="more" @tap="showMore">
        <view class="icon add"></view>
      </view>
      <!-- #endif -->
      <view class="textbox">
        <view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view>
        <view class="text-mode" :class="isVoice?'hidden':''">
          <view class="box">
            <textarea auto-height="true" cursor-spacing="80" confirm-type="send" :show-confirm-bar="false" v-model="textMsg" @confirm="fashong" @focus="textareaFocus" />
          </view>
          <view class="em" @tap="chooseEmoji">
            <view class="icon biaoqing"></view>
          </view>
        </view>
      </view>
      <!-- #ifndef H5 -->
      <view class="more" @tap="showMore">
        <view class="icon add"></view>
      </view>
      <!-- #endif -->
      <view class="send" :class="isVoice?'hidden':''" @tap="sendText">
        <view class="btn">发送</view>
      </view>
    </view>
    <!-- 录音UI效果 -->
    <view class="record" :class="recording?'':'hidden'">
      <view class="ing" :class="willStop?'hidden':''">
        <view class="icon luyin2"></view>
      </view>
      <view class="cancel" :class="willStop?'':'hidden'">
        <view class="icon chehui"></view>
      </view>
      <view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
    </view>
    <!-- 红包弹窗 -->
    <view class="windows" :class="windowsState">
      <!-- 遮罩层 -->
      <view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view>
      <view class="layer" @touchmove.stop.prevent="discard">
        <view class="open-redenvelope">
          <view class="top">
            <view class="close-btn">
              <view class="icon close" @tap="closeRedEnvelope"></view>
            </view>
            <image src="/static/img/im/face/face_1.jpg"></image>
          </view>
          <view class="from">来自{{redenvelopeData.from}}</view>
          <view class="blessing">{{redenvelopeData.blessing}}</view>
          <view class="money">{{redenvelopeData.money}}</view>
          <view class="showDetails" @tap="toDetails(redenvelopeData.rid)">
            查看领取详情 <view class="icon to"></view>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      //TIM变量
      conversationActive: null,
      toUserId: "",
      toUserInfo: null,
      userInfo: null,
      nextReqMessageID: "",
      count: 15,
      isCompleted: "",
      msgList: [],
      TIM: null,
      //文字消息
      textMsg: "",
      //消息列表
      isHistoryLoading: false,
      scrollAnimation: false,
      scrollTop: 0,
      scrollToView: "",

      msgImgList: [],
      myuid: 0,

      //录音相关参数
      // #ifndef H5
      //H5不能录音
      RECORDER: uni.getRecorderManager(),
      // #endif
      isVoice: false,
      voiceTis: "按住 说话",
      recordTis: "手指上滑 取消发送",
      recording: false,
      willStop: false,
      initPoint: {
        identifier: 0,
        Y: 0,
      },
      recordTimer: null,
      recordLength: 0,

      //播放语音相关参数
      AUDIO: uni.createInnerAudioContext(),
      playMsgid: null,
      VoiceTimer: null,
      // 抽屉参数
      popupLayerClass: "",
      // more参数
      hideMore: true,
      //表情定义
      hideEmoji: true,
      emojiList: this.$commen.emojiList,
      //表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
      onlineEmoji: {
        "100.gif": "100.gif",
        "101.gif": "101.gif",
        "102.gif": "102.gif",
        "103.gif": "103.gif",
        "104.gif": "104.gif",
        "105.gif": "105.gif",
        "106.gif": "106.gif",
        "107.gif": "107.gif",
        "108.gif": "108.gif",
        "109.gif": "109.gif",
        "110.gif": "110.gif",
        "111.gif": "111.gif",
        "112.gif": "112.gif",
        "113.gif": "113.gif",
        "114.gif": "114.gif",
        "115.gif": "115.gif",
        "116.gif": "116.gif",
        "117.gif": "117.gif",
        "118.gif": "118.gif",
        "119.gif": "119.gif",
        "120.gif": "120.gif",
        "121.gif": "121.gif",
        "122.gif": "122.gif",
        "123.gif": "123.gif",
        "124.gif": "124.gif",
        "125.gif": "125.gif",
        "126.gif": "126.gif",
        "127.gif": "127.gif",
        "128.gif": "128.gif",
        "129.gif": "129.gif",
        "130.gif": "130.gif",
        "131.gif": "131.gif",
        "132.gif": "132.gif",
        "133.gif": "133.gif",
        "134.gif": "134.gif",
        "135.gif": "135.gif",
        "136.gif": "136.gif",
        "137.gif": "137.gif",
        "138.gif": "138.gif",
        "139.gif": "139.gif",
        "140.gif": "140.gif",
        "141.gif": "141.gif",
        "142.gif": "142.gif",
        "143.gif": "143.gif",
        "144.gif": "144.gif",
        "145.gif": "145.gif",
        "146.gif": "146.gif",
        "147.gif": "147.gif",
        "148.gif": "148.gif",
        "149.gif": "149.gif",
        "150.gif": "150.gif",
        "151.gif": "151.gif",
        "152.gif": "152.gif",
        "153.gif": "153.gif",
        "154.gif": "154.gif",
        "155.gif": "155.gif",
        "156.gif": "156.gif",
        "157.gif": "157.gif",
        "158.gif": "158.gif",
        "159.gif": "159.gif",
        "160.gif": "160.gif",
        "161.gif": "161.gif",
        "162.gif": "162.gif",
        "163.gif": "163.gif",
        "164.gif": "164.gif",
        "165.gif": "165.gif",
        "166.gif": "166.gif",
        "167.gif": "167.gif",
        "168.gif": "168.gif",
        "169.gif": "169.gif",
        "170.gif": "170.gif",
        "171.gif": "171.gif",
        "172.gif": "172.gif",
        "173.gif": "173.gif",
        "174.gif": "174.gif",
        "175.gif": "175.gif",
        "176.gif": "176.gif",
        "177.gif": "177.gif",
        "178.gif": "178.gif",
        "179.gif": "179.gif",
        "180.gif": "180.gif",
        "181.gif": "181.gif",
        "182.gif": "182.gif",
        "183.gif": "183.gif",
        "184.gif": "184.gif",
        "185.gif": "185.gif",
        "186.gif": "186.gif",
        "187.gif": "187.gif",
        "188.gif": "188.gif",
        "189.gif": "189.png",
        "190.gif": "190.gif",
        "191.gif": "191.gif",
        "192.gif": "192.gif",
        "193.gif": "193.gif",
        "194.gif": "194.gif",
        "195.gif": "195.gif",
        "196.gif": "196.gif",
        "197.gif": "197.gif",
        "198.gif": "198.gif",
        "199.gif": "199.gif",
      },
      //红包相关参数
      windowsState: "",
      redenvelopeData: {
        rid: null, //红包ID
        from: null,
        face: null,
        blessing: null,
        money: null,
      },
    };
  },
  computed: {
    ...mapState({
      currentMessageList: (state) => state.currentMessageList,
    }),
    ...mapState(["vuex_user_info"]),
  },
  watch: {
    currentMessageList(newVal, oldVal) {
      console.log(newVal, oldVal);
      this.msgList = newVal;
      this.screenMsg(newVal, oldVal);
    },
  },
  onLoad() {
    this.userInfo = this.vuex_user_info;
    this.toUserId = this.$store.state.toUserId;
    this.conversationActive = this.$store.state.conversationActive;
    this.TIM = this.$TIM;
    this.getMsgList();
    //语音自然播放结束
    this.AUDIO.onEnded((res) => {
      this.playMsgid = null;
    });
    // #ifndef H5
    //录音开始事件
    this.RECORDER.onStart((e) => {
      this.recordBegin(e);
    });
    //录音结束事件
    this.RECORDER.onStop((e) => {
      this.recordEnd(e);
    });
    // #endif
    this.scrollTop = 9999;
  },
  onShow() {
    this.scrollTop = 9999;
  },
  onUnload() {
    //退出页面 将所有的会话内的消息设置为已读
    let promise = this.tim.setMessageRead({
      conversationID: this.conversationActive.conversationID,
    });
    promise
      .then(function (imResponse) {
        console.log("全部已读");
        // 已读上报成功
      })
      .catch(function (imError) {
        // 已读上报失败
        console.warn("setMessageRead error:", imError);
      });
  },
  methods: {
    //聊天的节点加上外层的div
    nodesFliter(str) {
      let nodeStr =
        '<div style="align-items: center;word-wrap:break-word;">' +
        str +
        "</div>";
      return nodeStr;
    },
    //时间过滤
    timeFliter(timer) {
      let timeData = new Date(timer * 1000);
      let str = this.$commen.dateTimeFliter(timeData);
      return str;
    },
    // 接受消息(定位消息)
    screenMsg(newVal, oldVal) {
      console.log(oldVal);
      console.log(newVal);
      if (newVal[0].ID && oldVal[0].ID) {
        if (newVal[0].ID != oldVal[0].ID && newVal.length >= this.count) {
          this.$nextTick(() => {
            this.scrollToView = oldVal[0].ID;
            console.log(this.scrollToView);
          });
        }
        // else if(newVal.length = oldVal.length ){
        // 	this.scrollToView = newVal[0].ID
        // }
        else {
          this.$nextTick(() => {
            // this.scrollToView = newVal[newVal.length - 1].ID;
            // console.log(this.scrollToView);
          });
        }
      } else {
        this.$nextTick(() => {
          this.scrollToView = newVal[newVal.length - 1].ID;
          console.log(this.scrollToView);
        });
      }
    },
    //触发滑动到顶部(加载历史信息记录)
    loadHistory(e) {
      // 更多消息列表
      let conversationID = this.conversationActive.conversationID;
      let promise = this.tim.getMessageList({
        conversationID: conversationID,
        nextReqMessageID: this.nextReqMessageID,
        count: this.count,
      });
      promise.then((res) => {
        this.$store.commit("unshiftCurrentMessageList", res.data.messageList);
        this.nextReqMessageID = res.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段。
        this.isCompleted = res.data.isCompleted;
      });
      //这段代码很重要，不然每次加载历史数据都会跳到顶部
      this.$nextTick(function () {
        this.scrollToView = this.nextReqMessageID; //跳转上次的第一行信息位置
        this.$nextTick(function () {
          this.scrollAnimation = true; //恢复滚动动画
        });
      });
      this.isHistoryLoading = false;
    },
    // 加载初始页面消息
    getMsgList() {
      // 历史消息列表
      let conversationID = this.conversationActive.conversationID;
      console.log(conversationID);
      let promise = this.tim.getMessageList({
        conversationID: conversationID,
        count: this.count,
      });
      promise.then((res) => {
        this.$store.commit("pushCurrentMessageList", res.data.messageList);
        console.log(res);
        this.nextReqMessageID = res.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段。
        this.isCompleted = res.data.isCompleted;
        this.scrollToView =
          res.data.messageList[res.data.messageList.length - 1].ID;
        console.log(this.scrollToView);
        console.log(this.nextReqMessageID);
      });
      // 滚动到底部
      this.$nextTick(function () {
        //进入页面滚动到底部
        this.scrollTop = 9999;
        this.$nextTick(function () {
          this.scrollAnimation = true;
        });
      });
    },
    //处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
    setPicSize(content) {
      // 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
      let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
      let maxH = uni.upx2px(350); //350是定义消息图片最大高度
      if (content.w > maxW || content.h > maxH) {
        let scale = content.w / content.h;
        content.w = scale > 1 ? maxW : maxH * scale;
        content.h = scale > 1 ? maxW / scale : maxH;
      }
      return content;
    },
    //更多功能(点击+弹出)
    showMore() {
      this.isVoice = false;
      this.hideEmoji = true;
      if (this.hideMore) {
        this.hideMore = false;
        this.openDrawer();
      } else {
        this.hideDrawer();
      }
    },
    // 打开抽屉
    openDrawer() {
      this.popupLayerClass = "showLayer";
    },
    // 隐藏抽屉
    hideDrawer() {
      this.popupLayerClass = "";
      setTimeout(() => {
        this.hideMore = true;
        this.hideEmoji = true;
      }, 150);
    },
    // 选择图片发送
    chooseImage() {
      this.getImage("album");
    },
    //拍照发送
    camera() {
      this.getImage("camera");
    },
    //发红包
    handRedEnvelopes() {
      uni.navigateTo({
        url: "HM-hand/HM-hand",
      });
      this.hideDrawer();
    },
    //选照片 or 拍照
    getImage(type) {
      this.hideDrawer();
      uni.chooseImage({
        count: 1,
        sourceType: [type],
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          console.log(res);
          this.sendMsg(res, "img");
        },
      });
    },
    // 选择表情
    chooseEmoji() {
      this.hideMore = true;
      if (this.hideEmoji) {
        this.hideEmoji = false;
        this.openDrawer();
      } else {
        this.hideDrawer();
      }
    },
    //添加表情
    addEmoji(em) {
      this.textMsg += em.alt;
    },

    //获取焦点，如果不是选表情ing,则关闭抽屉
    textareaFocus() {
      if (this.popupLayerClass == "showLayer" && this.hideMore == false) {
        this.hideDrawer();
      }
    },
    fashong() {
      this.sendText();
    },
    // 发送文字消息
    sendText() {
      this.hideDrawer(); //隐藏抽屉
      if (!this.textMsg) {
        return;
      }
      let content = this.replaceEmoji(this.textMsg);
      let msg = {
        text: content,
      };
      this.sendMsg(msg, "text");
      this.textMsg = ""; //清空输入框
    },
    //替换表情符号为图片
    replaceEmoji(str) {
      let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
        console.log("item: " + item);
        for (let i = 0; i < this.emojiList.length; i++) {
          let row = this.emojiList[i];
          for (let j = 0; j < row.length; j++) {
            let EM = row[j];
            if (EM.alt == item) {
              //在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径
              //比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
              let onlinePath =
                "https://lvs.shandongweipai.com/uploads/20211029/";
              let imgstr =
                '<img src="' + onlinePath + this.onlineEmoji[EM.url] + '">';
              console.log("imgstr: " + imgstr);
              return imgstr;
            }
          }
        }
      });
      return replacedStr;
    },
    // 发送消息
    sendMsg(content, type) {
      if (type == "text") {
        console.log(12312312);
        let message = this.tim.createTextMessage({
          to: this.toUserId.toString(),
          conversationType: "C2C",
          payload: {
            text: content.text,
          },
        });
        this.$store.commit("pushCurrentMessageList", message);
        let pomise = this.tim.sendMessage(message);
        pomise.then((res) => {
          console.log(res, "发送成功");
          // // 滚动到底部
          // this.$nextTick(function() {
          // 	//进入页面滚动到底部
          // 	this.scrollTop = 99999;
          // 	this.$nextTick(function() {
          // 		this.scrollAnimation = true;
          // 	});
          // });

          this.$nextTick(() => {
            // 滚动到底
            console.log(res.data.message.ID);
            this.scrollToView = res.data.message.ID;
          });
        });
      }
      // let that = this
      if (type == "img") {
        console.log("图片", content);

        let message = this.tim.createImageMessage({
          to: this.toUserId,
          conversationType: this.$TIM.TYPES.CONV_C2C,
          payload: {
            file: content,
          },
          onProgress: function (event) {
            console.log("file uploading:", event);
          },
        });
        // 2. 发送消息
        this.$store.commit("pushCurrentMessageList", message);
        let promise = this.tim.sendMessage(message);
        promise
          .then(function (res) {
            // 发送成功
            console.log(res, "发送成功");
            this.$nextTick(() => {
              // 滚动到底
              console.log(res.data.message.ID);
              this.scrollToView = res.data.message.ID;
            });
          })
          .catch(function (imError) {
            // 发送失败
            console.warn("sendMessage error:", imError);
          });
      }
    },
    // 添加文字消息到列表
    addTextMsg(msg) {
      console.log(msg);
      this.msgList.push(msg);
    },
    // 添加语音消息到列表
    addVoiceMsg(msg) {
      this.msgList.push(msg);
    },
    // 添加图片消息到列表
    addImgMsg(msg) {
      console.log(msg);
      msg.msg.content = this.setPicSize(msg.msg.content);
      this.msgImgList.push(msg.msg.content.url);
      this.msgList.push(msg);
    },
    addRedEnvelopeMsg(msg) {
      this.msgList.push(msg);
    },
    // 添加系统文字消息到列表
    addSystemTextMsg(msg) {
      this.msgList.push(msg);
    },
    // 添加系统红包消息到列表
    addSystemRedEnvelopeMsg(msg) {
      this.msgList.push(msg);
    },
    // 打开红包
    openRedEnvelope(msg, index) {
      let rid = msg.content.rid;
      uni.showLoading({
        title: "加载中...",
      });
      console.log("index: " + index);
      //模拟请求服务器效果
      setTimeout(() => {
        //加载数据
        if (rid == 0) {
          this.redenvelopeData = {
            rid: 0, //红包ID
            from: "大黑哥",
            face: "/static/img/im/face/face.jpg",
            blessing: "恭喜发财，大吉大利",
            money: "已领完",
          };
        } else {
          this.redenvelopeData = {
            rid: 1, //红包ID
            from: "售后客服008",
            face: "/static/img/im/face/face_2.jpg",
            blessing: "恭喜发财",
            money: "0.01",
          };
          if (!msg.content.isReceived) {
            // {type:"system",msg:{id:8,type:"redEnvelope",content:{text:"你领取了售后客服008的红包"}}},
            this.sendSystemMsg(
              {
                text:
                  "你领取了" +
                  (msg.userinfo.uid == this.myuid
                    ? "自己"
                    : msg.userinfo.username) +
                  "的红包",
              },
              "redEnvelope"
            );
            console.log(
              "this.msgList[index]: " + JSON.stringify(this.msgList[index])
            );
            this.msgList[index].msg.content.isReceived = true;
          }
        }
        uni.hideLoading();
        this.windowsState = "show";
      }, 200);
    },

    // 关闭红包弹窗
    closeRedEnvelope() {
      this.windowsState = "hide";
      setTimeout(() => {
        this.windowsState = "";
      }, 200);
    },
    sendSystemMsg(content, type) {
      let lastid = this.msgList[this.msgList.length - 1].msg.id;
      lastid++;
      let row = {
        type: "system",
        msg: {
          id: lastid,
          type: type,
          content: content,
        },
      };
      console.log(content);
      this.screenMsg(row);
    },
    //领取详情
    toDetails(rid) {
      uni.navigateTo({
        url: "HM-details/HM-details?rid=" + rid,
      });
    },
    // 预览图片
    showPic(msg) {
      console.log(msg);
      var list = [];
      list.push(msg[0].url);
      uni.previewImage({
        urls: list,
      });
    },
    // 播放语音
    playVoice(msg) {
      this.playMsgid = msg.id;
      this.AUDIO.src = msg.content.url;
      this.$nextTick(function () {
        this.AUDIO.play();
      });
    },
    // 录音开始
    voiceBegin(e) {
      if (e.touches.length > 1) {
        return;
      }
      this.initPoint.Y = e.touches[0].clientY;
      this.initPoint.identifier = e.touches[0].identifier;
      this.RECORDER.start({
        format: "mp3",
      }); //录音开始,
    },
    //录音开始UI效果
    recordBegin(e) {
      this.recording = true;
      this.voiceTis = "松开 结束";
      this.recordLength = 0;
      this.recordTimer = setInterval(() => {
        this.recordLength++;
      }, 1000);
    },
    // 录音被打断
    voiceCancel() {
      this.recording = false;
      this.voiceTis = "按住 说话";
      this.recordTis = "手指上滑 取消发送";
      this.willStop = true; //不发送录音
      this.RECORDER.stop(); //录音结束
    },
    // 录音中(判断是否触发上滑取消发送)
    voiceIng(e) {
      if (!this.recording) {
        return;
      }
      let touche = e.touches[0];
      //上滑一个导航栏的高度触发上滑取消发送
      if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
        this.willStop = true;
        this.recordTis = "松开手指 取消发送";
      } else {
        this.willStop = false;
        this.recordTis = "手指上滑 取消发送";
      }
    },
    // 结束录音
    voiceEnd(e) {
      if (!this.recording) {
        return;
      }
      this.recording = false;
      this.voiceTis = "按住 说话";
      this.recordTis = "手指上滑 取消发送";
      this.RECORDER.stop(); //录音结束
    },
    //录音结束(回调文件)
    recordEnd(e) {
      clearInterval(this.recordTimer);
      if (!this.willStop) {
        console.log("e: " + JSON.stringify(e));
        let msg = {
          length: 0,
          url: e.tempFilePath,
        };
        let min = parseInt(this.recordLength / 60);
        let sec = this.recordLength % 60;
        min = min < 10 ? "0" + min : min;
        sec = sec < 10 ? "0" + sec : sec;
        msg.length = min + ":" + sec;
        this.sendMsg(msg, "voice");
      } else {
        console.log("取消发送录音");
      }
      this.willStop = false;
    },
    // 切换语音/文字输入
    switchVoice() {
      this.hideDrawer();
      this.isVoice = this.isVoice ? false : true;
    },
    discard() {
      return;
    },
  },
};
</script>
<style lang="scss">
@import "@/static/css/style.scss";
</style>
